<template>
  <div>
    <div>
      <!-- <img src="@/assets/banner.jpg" class="carousel-img"> -->
        <el-carousel :interval="4000" arrow="always" height="400px">
          <el-carousel-item >
            <img  class="carousel-img" src="../../assets/bg1.png" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img  class="carousel-img" src="../../assets/bg2.png" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img  class="carousel-img" src="../../assets/bg3.jpg" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img  class="carousel-img" src="../../assets/bg4.png" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img  class="carousel-img" src="../../assets/bg5.png" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img  class="carousel-img" src="../../assets/bg6.png" alt="">
          </el-carousel-item>
        </el-carousel>
    </div>
    <div class="app-item-contain cardBox">
      <el-card class="index-paper-show" shadow="never">
        <div class="announcement-index-card-contain" v-loading="announcementListLoading">
          <none-show customer-style="no-data-layout-index" v-if="announcementNoneShow" />
          <div v-for="(item, index) in announcementTableData" :key="index">
            <div class="announcement-index-contain">
              <img :src="item.imageSrc" class="announcement-image">
              <div class="announcement-title-contain">
                <div class="announcement-title">
                  <router-link :to="{ path: '/announcement/detail', query: { id: item.id } }" class="announcement-link">
                    <el-tag effect="dark" type="" class="announcement-tag" v-if="item.overhead">顶置
                    </el-tag>
                    <el-tag effect="dark" type="danger" class="announcement-tag" v-if="item.importanted">
                      重要
                    </el-tag>
                    {{ item.title }}
                  </router-link>
                </div>
                <div class="announcement-time">发布时间：{{ item.createTime }}</div>
              </div>
            </div>
            <div class="line" v-if="index !== announcementTableData.length - 1"></div>
          </div>
          <router-link :to="{ path: '/announcement/index' }">
            <div class="more">
              更多>></div>
          </router-link>
        </div>
      </el-card>
      <el-card class="index-paper-show" shadow="never">
        <div class="announcement-index-card-contain">
          <none-show customer-style="no-data-layout-index" v-if="trainNoneShow" />
          <div v-for="(item, index) in tableData" :key="index">
            <div class="announcement-index-contain">
              <img :src="item.coverPath" class="announcement-image">
              <div class="announcement-title-contain">
                <div class="announcement-title">
                  <router-link :to="{ path: '/train/detail', query: { id: item.id } }" class="announcement-link">
                    {{ item.name }}
                  </router-link>
                </div>
                <div class="announcement-time"> 共{{ item.itemCount }}节 | {{ item.studyTimeStr }}</div>
              </div>
            </div>
          </div>
          <router-link :to="{ path: '/train/index' }">
            <div class="more">
              更多>></div>
          </router-link>
        </div>
      </el-card>

    </div>
  </div>
  <div class="account-foot-copyright">
    <span>{{ VITE_APP_COPYRIGHT }}</span>
  </div>
</template>

<script>

import { page as announcementPage } from '@/api/announcement'
import { page } from '@/api/train'

export default {
  data() {
    return {
      announcementListLoading: true,
      announcementTableData: [],
      announcementNoneShow: false,
      trainNoneShow: false,
      tableData: [],
      queryParam: {
        trainArchiveId: '',
        pageIndex: 1,
        pageSize: 10
      },
      imgList:[
        '../../assets/background.jpg',
        "https://p8.itc.cn/q_70/images03/20211011/28bf78ccc1b84990b45e2cd9e413e5fc.jpeg",
        "https://n.sinaimg.cn/spider20210921/572/w784h588/20210921/e776-7937f75fcde920aff0bc46782a4aa65a.jpg"
      ]
    }
  },
  created() {
    this.announcementLoad()
    page(this.queryParam).then(data => {
      const re = data.response
      this.tableData = re.list.slice(0, 2)
      this.queryParam.pageIndex = re.pageNum
      this.trainNoneShow = data.total === 0;
    })
  },
  methods: {
    announcementLoad() {
      this.announcementListLoading = true
      announcementPage({ pageIndex: 1, pageSize: 5 }).then(data => {
        const re = data.response
        this.announcementTableData = re.list.slice(0, 2)
        this.announcementNoneShow = re.total === 0
      }).finally(() => {
        this.announcementListLoading = false
      })
    }
  }
}
</script>
<style lang="scss">
.cardBox {
  display: flex;

  .index-paper-show {
    width: 50%;
  }

  .announcement-index-card-contain {
    position: relative
  }

  .more {
    position: absolute;
    top: -10px;
    left: 90%;
  }
}
</style>
